<template>
  <div class="comments-container">
    <el-card class="comments-card" shadow="always">
      <div v-for="(comment, index) in PersonalReviewsList" :key="comment.id" class="single-comment">
        <el-card :body-style="{ padding: '10px' }" shadow="hover" class="comment-item">
          <div class="comment-info">
            <div class="comment-meta">
              <!-- <span class="comment-id">ID: {{ comment.id }}</span>
              <span class="comment-user">用户ID: {{ comment.userId }}</span> -->
              <span class="comment-room">房间ID: {{ comment.roomId }}</span>
            </div>

            <div class="comment-content">
              <div class="comment-text">{{ comment.reviews }}</div>
              <div class="comment-footer">
                <el-rate v-model="comment.score" disabled show-score text-color="#ff9900" score-template="{value}"
                  class="comment-score" />
                <span class="comment-time">{{ comment.releaseTime }}</span>
              </div>
            </div>
          </div>
        </el-card>
        <div v-if="index !== PersonalReviewsList.length - 1" class="comment-separator"></div>
      </div>
      <div v-if="PersonalReviewsList.length === 5">
        <el-row class="row-bg" justify="space-evenly">
          <el-col :span="9">
            <el-divider />
            <div class="grid-content ep-bg-purple" />
          </el-col>
          <el-col :span="6" style="justify-items: center; align-items: center; margin-top: 10px;">
            <el-text class="mx-1" type="info" >仅显示最近五条信息</el-text>
            <div class="grid-content ep-bg-purple-light" />
          </el-col>
          <el-col :span="9"><el-divider />
            <div class="grid-content ep-bg-purple" />
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus'
import api from '@/api/index.js';
import { userStore } from '@/stores/userInfoStore';

const userStoreInfo = userStore();

// 接收的个人评论数据列表
const PersonalReviewsList = ref([]);

const commentData = ref({
  id: null,
  userId: userStoreInfo.userInfo.id,
  roomId: null,
  score: null,
  reviews: null,
  releaseTime: null,

  current: 1,
  size: 5
});


const fetchReviewsData = async () =>{
  try{
    await api.getUserReviewsInCondition(commentData.value).then((res)=>{
      PersonalReviewsList.value = res.data.data.list || [];
      console.log("评论信息",PersonalReviewsList.value)
    })
  }catch(error){
    ElMessage.error('评论信息请求异常')

  }
}

onMounted(() => {
  fetchReviewsData();
});
</script>

<style scoped>
.comments-container {
  max-width: 100%;
  margin: 20px auto;
  padding: 0 20px;
}

.comments-card {
  width: 100%;
}

.comments-header {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.single-comment {
  margin-bottom: 10px;
}

.comment-item {
  width: 100%;
  transition: transform 0.2s;
}

.comment-item:hover {
  transform: translateY(-3px);
}

.comment-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comment-meta {
  display: flex;
  gap: 15px;
  font-size: 13px;
  color: #666;
}

.comment-content {
  margin-top: 5px;
}

.comment-text {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
  word-break: break-all;
}

.comment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.comment-score {
  flex: 1;
}

.comment-time {
  font-size: 12px;
  color: #999;
  margin-left: 10px;
}

.comment-separator {
  height: 1px;
  background-color: #eee;
  margin: 10px 0;
}
</style>